<template>
  <el-container class="app_container flex">
    <!-- <aside @handleNodeClick="handleNodeClick" :currentPoint="currentPointId">
    </aside> -->
    <Aside @handleNodeClick="handleNodeClick" />
    <el-main class="app_main flex-1">
      <breadcrumb :title="pageTitle" />
      <div class="app_content flex">
        <div class="content_box" v-for="(item, key) in pageContentConfig" :key="key" :class="'content_box__' + item.type">
          <custom-title :title="item.title" />
          <template v-if="item.type === 'des'">
            <base-descriptions :descConfig="descConfig" :descConfigItem="descConfigItem" :descModel="descModel" v-loading="desLoading" />
          </template>
          <template v-else-if="item.type === 'table'">
            <base-table :tableModel="item.model" :tableItemConfig="item.config" height="300" stripe v-loading="groupLoading" />
          </template>
          <template v-else>
            <!-- <base-images fit="cover" :imgList="planeImgsList" @click="imgClick" /> -->
            <BaseImages :imgList="item.list" v-loading="item.loading"/>
          </template>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getProjectPointControl, listSubPoint, listContact, getProjectPointPicList } from "@/api"
import { mapState } from 'vuex'
import Aside from '@/components/Aside';
import { EventBus } from '@/utils/eventbus'
import BaseImages from '@/components/PageContent/BaseImages.vue';
export default {
  name: 'projectPoint',
  data () {
    return {
      // 页面配置组件
      pageComponents: {
        des: 'BaseDescriptions',
        imgs: 'BaseImages',
        table: 'BaseTable',
      },
      // 项目组成加载状态
      groupLoading: false,
      // 联系人加载状态
      contactLoading: false,
      // 页面配置
      pageContentConfig: [
        {
          title: '基本信息',
          type: 'des',
        },
        {
          title: '项目组成',
          type: 'table',
          prop: 'group',
          model: [],
          config: [
            {
              prop: 'provinceId',
              label: '编号'
            },
            {
              prop: 'projectPointName',
              label: '名称'
            },
            {
              prop: 'projectPointTypeName',
              label: '类型'
            },
            {
              prop: 'projectAddress',
              label: '地址'
            },
            {
              prop: 'projectDirector',
              label: '联系人'
            }
          ]
        },
        {
          title: '平面图',
          type: 'imgs',
          prop: 'plane',
          list: [],
          loading: true
        },
        {
          title: '实景图',
          type: 'imgs',
          prop: 'real',
          list: [],
          loading: true
        },
        {
          title: '联系人',
          type: 'table',
          prop: 'contact',
          model: [],
          config: [
            {
              prop: 'userName',
              label: '姓名'
            },
            {
              prop: 'email',
              label: '邮箱'
            },
            {
              prop: 'phonenumber',
              label: '联系电话'
            },
          ]
        },
      ],
      // 详情页基础配置
      descConfig: {
        size: 'medium',
        column: '2',
        type: 'img'
      },
      // 详情页数据
      descModel: {},
      descConfigItem: [
        {
          fieIdName: 'remark',
          label: '名称',
          span: '3',
        },
        {
          fieIdName: 'cityId',
          label: '编号',
          span: '2',
        },
        {
          fieIdName: 'projectPointTypeName',
          label: '类型',
          span: '2',
        },
        {
          fieIdName: 'projectDirector',
          label: '负责人',
          span: '3',
        },
        {
          fieIdName: 'remark',
          label: '简介',
          span: '3',
        },
      ],
      desLoading: false,
      // 平面图列表
      planeImgsList: [],
      // 当前点位
      tableItemConfig: {},
      // 项目组成表格配置
      projectGroupListConfigItem: [
      ],
      searchMap: {
        projectPointId: 0
      }
    };
  },
  created () {
    EventBus.$on('currentTree', (data) => {
      this.searchMap.projectPointId = data.projectPointId
      this.getProjectPointDescription()
      this.getProjectGroupList()
      this.getContactByProjectPoint()
      this.fetchImages()
    })

  },
  computed: {
    ...mapState('config', ['inFilePrefix']),
    pageTitle () {
      return '项目点位';
    },
  },
  methods: {
    // 点位详细信息
    getProjectPointDescription () {
      this.desLoading = true
      getProjectPointControl(this.searchMap.projectPointId).then(resp => {
        this.descModel = resp.data
        if (this.descModel.picUrl !== null) {
          this.descModel.picUrl = this.inFilePrefix + this.descModel.picUrl
        }
        console.log(this.descModel)

      })
      this.desLoading = false

    },
    // 查询下级单位列表
    getProjectGroupList () {
      this.groupLoading = true
      listSubPoint(this.searchMap).then(res => {
        this.pageContentConfig.forEach(item => {
          if (item.prop === 'group') {
            item.model = res.data
            this.groupLoading = false
          }
        })
      })
    },
    // 查询联系人列表
    getContactByProjectPoint () {
      this.contactLoading = true
      listContact(this.searchMap).then(res => {
        this.pageContentConfig.forEach(item => {
          if (item.prop === 'contact') {
            item.model = res.data
            this.contactLoading = false
          }
        })
      })
    },
    // 根据图片类型获取对应图片列表
    getProjectPicList (type) {
      const projectPointId = this.searchMap.projectPointId
      const params = {
        projectPointId: projectPointId,
        picType: type
      }
      return getProjectPointPicList(params)
    },
    // 根据prop返回对应数据
    setConfigData (data, prop) {
      data.forEach(item => {
        if (item.prop === prop) {
          return data.rows
        }
      })
    },
    async getImgList (imgType) {
      try {
        const responses = await Promise.all(
          this.pageContentConfig
            .filter(item => item.prop === imgType) // 只处理需要的类型，提高效率
            .map(async item => {
              const resp = await this.getProjectPicList(imgType === 'plane' ? 1 : 2);
              return { item, resp };
            })
        );

        responses.forEach(({ item, resp }) => {
          if (resp && resp.rows) {
            item.list = resp.rows;
            item.loading = false;
          }
        });
      } catch (error) {
        console.error(`Error fetching ${imgType} image list:`, error);
      }
    },

    async fetchImages () {
      await this.getImgList('plane');
      await this.getImgList('real');
    },
    // },
    handleNodeClick (item) {
      this.searchMap.projectPointId = item.projectPointId
      this.getProjectPointDescription()
      this.getProjectGroupList()
      this.fetchImages()
    },
    pageComponentName (item) {
      return this.pageComponents[item] || 'BaseTable';
    },
    imgClick (itm) {
      console.log(itm);
    },
    handleChange () {
    }
  },
  beforeDestroy () {
    EventBus.$off('currentTree')
  },
  components: {
    Aside,
    BaseImages,
  },
};
</script>
